<template>
  <div class="main">
    <van-sticky>
      <div class="nav">
        <img :src="back" alt="" @click="handleBack"/>
        <div class="title">地址管理</div>
      </div>
    </van-sticky>
    <div class="body">
      <div v-if="addressList.length==0" class="address" style="text-align: center">暂无收货地址...</div>
      <div class="address-item" v-for="(item,index) in addressList" :key="index" @click="gotoBackFrom(item)">
        <div class="title">{{ item.areaName }}</div>
        <div class="address">
          <div>{{ item.address }}</div>
          <img :src="edit" @click="editAddress(item)"/>
        </div>
        <div class="bottom"><span class="name">{{ item.name }}</span> <span class="tel">{{ item.phone }}</span>
          <div class="mrbtn" v-if="item.isDefault===0">默认</div>
        </div>
      </div>
    </div>
    <div class=" footer">
      <div class="footer-item" @click="gotoNewAddress">
        <van-icon name="plus"/>
        <span>新建地址</span>
      </div>
    </div>
  </div>
</template>

<script>
import {queryAddress} from "../../../api/my";
import {updateOrderAddress} from "../../../api/shopping";

export default {
  name: "addressManagement",
  data() {
    return {
      back: require("@/assets/my/back.png"),
      edit: require("@/assets/my/edit.png"),
      addressList: [],
      from: '',
      id: '',//订单id
      detailId: '',//订单明细id
    }
  },
  mounted() {
    this.from = this.$route.query.from
    this.id = this.$route.query.id
    this.detailId = this.$route.query.detailId
    console.log('-----修改地址来源---', this.from)
    this.queryAddress()
  },
  methods: {
    async gotoBackFrom(item) {
      if (this.from == 'writeOrder') {
        this.$router.push({path: '/writeOrder', query: {addressId: item.id}})
      } else if (this.from == 'payStatus') {
        let res = await this.updateOrderAddress(item)
        if (res.data) {
          this.$router.push({path: '/payStatus', query: {id: this.id}})
        }
      } else if (this.from == 'orderDetail') {
        let res = await this.updateOrderAddress(item)
        if (res.data) {
          this.$router.push({path: '/orderDetail', query: {id: this.id}})
        }
      }
    },
    updateOrderAddress(item) {
      //调用地址修改的接口 如果成功的话 返回待支付页面
      let data = {
        detailId: this.detailId,//订单明细
        addressId: item.id,//地址id
        id: this.id,//订单id
      }
      return new Promise((resolve, reject) => {
        updateOrderAddress(data).then(res => {
          resolve(res)
        })
      })

    },
    queryAddress() {
      queryAddress().then(res => {
        console.log('000', res)
        this.addressList = res.data
      })
    }
    ,
    handleBack() {
      let message = {
        action: 'showBottom',
        param: {}
      }
      getInfoFromVue.postMessage(JSON.stringify(message))

      this.$router.go(-1);
    }
    ,
    gotoNewAddress() {
      this.$router.push({
        path: '/addAddress',
        query: {
          name: '新增'
        }
      })
    }
    ,
    editAddress(item) {
      this.$router.push({
        path: '/addAddress',
        query: {
          name: '编辑',
          obj: item
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.main {
   height: 100vh;
  padding: 0px 15px;
  display: flex;
  flex-direction: column;

  .nav {
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    .title{
      font-size: 20px;
      font-weight: 500;
    }

    > img {
      width: 10px;
      height: 16px;
      position: absolute;
      left: 15px;
    }
  }

  .body {
    padding-top: 0px;

    .address-item {
      padding: 10px 10px 10px;
      border-bottom: 0.5px solid rgba(229, 229, 229, 1);

      .title {
        font-size: 17px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 20.27px;
        color: rgba(84, 84, 84, 1);
        text-align: left;
        vertical-align: top;
      }

      .address {
        margin-top: 3px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        > div {
          width: 80%;
          font-size: 17px;
          font-weight: 400;
          letter-spacing: 0;
          line-height: 24.62px;
          color: rgba(0, 0, 0, 1);
          text-align: left;
          vertical-align: top;
        }

        > img {
          width: 20px;
          height: 20px;
          opacity: 1;
          //transform: rotate(45deg);
        }
      }

      .bottom {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-top: 3px;

        .name {
          font-size: 17px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 24.62px;
          color: rgba(84, 84, 84, 1);
        }

        .tel {
          margin-left: 5px;
          font-size: 17px;
          font-weight: 400;
          letter-spacing: 0px;
          color: rgba(199, 199, 199, 1);
        }

        .mrbtn {
          font-size: 17px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 25px;
          color: rgba(255, 255, 255, 1);
          width: 45px;
          height: 25px;
          opacity: 1;
          border-radius: 3px;
          background: rgba(242, 150, 0, 1);
          text-align: center;
          margin-left: 5px;
        }
      }
    }
  }

  .footer {
    display: flex;
    justify-content: center;
    margin-top: auto;
    align-items: center;
    margin-bottom: 15px;

    .footer-item {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 50px;
      width: 141px;
      height: 38px;
      //opacity: 1;
      border-radius: 19px;
      background: rgba(242, 150, 0, 1);

      font-size: 23px;
      font-weight: 500;
      //line-height: 33.3px;
      color: rgba(255, 255, 255, 1);
      padding:3px;
      //text-align: left;
      //vertical-align: top;
    }
  }

}
</style>
